<template>
  <view>
    <view v-if="ISNoData" class="empty">
      <image src="@/static/empty.png"></image>
    </view>
    <scroll-view
      v-else
      scroll-y="true"
      class="scroll-view-class"
      :style="'height:' + scroll_height + ''"
      :scroll-top="scrollTop"
      refresher-enabled
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @scrolltolower="lower"
    >
      <view class="car-list">
        <view
          class="car-item"
          v-for="(item, index) in carList"
          :key="index"
          @click="carDetail(item)"
        >
          <view class="car-name">{{ item.cars_name }}</view>
          <view class="car-tag">
            {{ item.appearance_interior }} {{ item.location_name }}
          </view>
          <view class="car-price">
            <text>指导价：{{ item.guide_price }}万</text>
            <text>{{ item.time }}</text>
          </view>
          <view class="car-bot">
            <text class="have" v-if="item.cars_search_status === 1"
              >待供应商报价</text
            >
            <text class="have" v-if="item.cars_search_status === 2"
              >已有{{ item.quotation_number }}个供应商报价</text
            >
            <text class="cancel" v-if="item.cars_search_status === 3"
              >已取消</text
            >
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { newsCarsSearchMyReleaseList } from "../../../../api/newCarSerach.js";
export default {
  data() {
    return {
      users_id: uni.getStorageSync("login").id,
      carList: [],

      scroll_height: "100vh",
      isRefresher: false, //下拉刷新状态
      page: 1, //第几页数据
      page_num: 8,
      last_page: 0, //总页数
      isShowMore: false, //上拉加载没有数据时展示控制
      ISNoData: false, //无数据时图片展示控制
      scrollTop: 0,

      isEnd: false,
      triggered: false,
      isfreshing: false,
    };
  },
  mounted() {
    this.getCarList();
  },
  methods: {
    backData() {
      this.getCarList();
    },
    getCarList() {
      const that = this;
      newsCarsSearchMyReleaseList(this.page, this.page_num, this.users_id).then(
        (res) => {
          that.$nextTick(() => {
            if (that.page == 1) {
              that.carList = [];
              that.carList = res.data.data;
              that.triggered = false;
              that.isfreshing = false;
            } else {
              for (var i = 0; i < res.data.data.length; i++) {
                that.carList.push(res.data.data[i]);
              }
              that.isEnd = false;
            }
            that.last_page = res.data.last_page;
            if (that.carList.length <= 0) {
              that.ISNoData = true;
            } else {
              that.ISNoData = false;
            }
            that.$forceUpdate();
            if (that.last_page == that.page) {
              that.isShowMore = true;
            } else {
              that.isShowMore = false;
            }
          });
        }
      );
    },

    onRefresh() {
      if (!this.triggered) {
        if (this.isfreshing) return;
        this.isfreshing = true;
        if (!this.triggered) {
          this.triggered = true;
        }
        this.page = 1;
        this.getCarList();
      }
    },

    lower() {
      if (!this.isShowMore) {
        if (!this.isEnd) {
          this.isEnd = true;
          if (this.page < this.last_page) {
            this.page = this.page + 1;
            this.getCarList();
          } else {
            uni.showToast({
              title: "没有数据了",
              icon: "none",
            });
          }
        }
      }
      if (this.isShowMore) {
        var that = this;
        setTimeout(() => {
          that.isShowMore = false;
        }, 2000);
      }
    },
    carDetail(item) {
      uni.navigateTo({
        url: `/pages/home/newCarSearch/myCarSearch/searchCarDetail?carId=${item.id}`,
      });
    },
    releaseCar() {
      uni.navigateTo({
        url: "/pages/home/newCarSearch/releaseCar/releaseCar",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.scroll-view-class {
  padding-bottom: 40rpx;
}
.car-list {
  height: inherit;
  color: #000000;
  padding: 20rpx 28rpx 200rpx;
  .car-item {
    margin-top: 20rpx;
    background: #ffffff;
    border-radius: 14rpx;
    padding: 29rpx 19rpx;
    &:first-child {
      margin-top: 0;
    }
    .car-name {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 800;
    }
    .car-tag {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin: 15rpx 0;
    }
    .car-price {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      margin-bottom: 25rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .car-bot {
      border-top: 1rpx solid #e6e6e6;
      padding-top: 20rpx;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      text.cancel {
        color: #666666;
      }
      text.have {
        color: #ec4b4b;
      }
    }
  }
}
.release-car {
  width: 100%;
  height: 162rpx;
  background: #ffffff;
  box-shadow: 0rpx -6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  view {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    background: #0e59ea;
    border-radius: 14rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
  }
}
.empty {
  display: flex;
  justify-content: center;
  image {
    margin-top: 360rpx;
  }
}
</style>
